<template>
	<div class="container" @click="globalClick">
		<div id="idContainer"></div>
		<JxNavbar title='动态详情' />
		<div class="main">
			<div class="userInfo">
				<image class="user-avatar" :src="articleData['user']['avatar'] || $surl('/avatar.png')" mode='aspectFill'></image>
				<view class="nickname uv-line-1">{{ articleData['user']['nickname'] }}</view>
			</div>

			<div class="title">{{ articleData['title'] }}</div>

			<div class="body"> {{ articleData['body'] }} </div>

			<div class="images" v-if="articleData['cover']['length']">
				<image :src='item' v-for="(item, index) in articleData['cover']" :key="index" @click.stop="previewImage(index)" mode="aspectFill"
					class="image-item" lazy-load />
			</div>

			<contactVue :articleData='articleData' />

			<div class="time">
				<text>{{ articleData['shortDate'] }}</text>
				<!-- <text>{{articleData['school']['name']}}</text> -->
			</div>

			<div class="plate-entry" v-if='!audit' @click="navigateTo('/pages/sub/main/list/index?id=' + articleData['menu']['menu_id'])">
				<div class="plate-entry-main">
					<image :src="articleData['menu']['icon']" mode='aspectFill' />
					<text class="uv-line-1">{{ articleData['menu']['name'] }}</text>
				</div>
				<i class="iconfont icon-right"></i>
			</div>

			<adBannerVue />

			<commentsVue id='idComment' />
		</div>

		<div class="list">
			<div class="title">大家都在围观</div>
			<div class="list-item" v-for="(item, index) in listData" :key="item['_id']">
				<JxList :item='item' />
			</div>
		</div>

		<JxLoadMore :list="listData" :loadStatus='loadStatus' />

		<bottomVue :articleData='articleData' @update='updateData' ref="bottomRef" />
		<AuxiliaryMenu :bottom='250' />
	</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import file from '@/utils/file/index.js'
import tools from '@/utils/tools/index.js'
import articles from '@/api/articles/index.js'
import JxList from '@/components/list/index.vue'
import { useGeneralStore } from '@/store/general.js'
import adBannerVue from './components/ad-banner.vue';
import commentsVue from './components/comments.vue';
import contactVue from './components/contact.vue';
import bottomVue from './components/bottom.vue';
import JxNavbar from '@/components/navbar/index.vue'
import JxLoadMore from '@/components/LoadMore/index.vue'
import AuxiliaryMenu from '@/components/AuxiliaryMenu/index.vue'
import { onLoad, onReady, onReachBottom, onShareTimeline } from '@dcloudio/uni-app';

const generalStore = useGeneralStore();
const audit = computed(() => generalStore.systemData.base.audit);

const id = ref('');
const page = ref(1);
const listData = ref([]);
const bottomRef = ref(null);
const loadStatus = ref('loadmore')
const articleData = ref({ user: {}, menu: {}, school: {}, cover: [] });


async function initData() {
	tools.loading('page');
	const response = await articles.get({ id: id.value });
	uni.hideLoading();
	if (response['code'] === 200) {
		const data = response['data'];
		data['cover'] = file.getFileUrls(data['cover']);
		data['user']['avatar'] = file.getFileUrl(data['user']['avatar']);
		data['menu']['icon'] = file.getFileUrl(data['menu']['icon']);
		data['shortDate'] = tools.shortDate(data['create_date']);
		articleData.value = data;

		// 分享设置
		uni.$u.currentShareParams.title = data['title'];
		data['cover']['length'] && (uni.$u.currentShareParams.imageUrl = data['cover'][0])

		listData.value = await getRecommendList();
	}
}

function previewImage(index) {
	uni.previewImage({
		current: index,
		urls: articleData.value.cover
	})
}

async function getRecommendList() {
	loadStatus.value = 'loading'
	const menu_id = articleData['value']['menu']['menu_id'];
	const response = await articles.getList({ menu_id, page: page.value, limit: 10 });
	if (response['code'] == 200) {
		const list = response['data'].map(item => {
			item['cover'] = file.getFileUrls(item['cover']);
			item['user']['avatar'] = file.getFileUrl(item['user']['avatar']);
			item['shortDate'] = tools.shortDate(item['create_date'])
			return item;
		})
		loadStatus.value = list.length < 10 ? 'nomore' : 'loadmore';
		return list;
	}
}

function navigateTo(url) {
	uni.navigateTo({
		url
	})
}

function globalClick() {
	if (bottomRef.value) {
		bottomRef.value.closeComment();
	}
}

function updateData({ type, value }) {
	switch (type) {
		case 'like':
			articleData['value']['isLike'] = value;
			articleData['value']['like_count'] += value ? 1 : -1;
			break;
		case "collection":
			articleData['value']['isCollection'] = value;
			break;
		default:
	}
}

// function shareSetting() {
// 	// #ifdef MP
// 	uni.$uv.mpShare.title = articleData['value']['title'];
// 	// #endif
// }

onReachBottom(async () => {
	if (loadStatus.value === 'loadmore') {
		page.value++;
		const list = await getRecommendList();
		listData.value = listData.value.concat(list);
	}
})

onLoad(async (option) => {
	id.value = option.id;
	await initData();
})
</script>

<style lang="scss" scoped>
.container {
	background: $uv-bg-color;

	.main {
		background: #fff;
		padding: 0 $side-width;

		.userInfo {
			display: flex;
			align-items: center;
			padding-top: 26rpx;

			.user-avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}

			.nickname {
				margin-left: 10rpx;
			}
		}

		.title {
			font-size: 34rpx;
			font-weight: 600;
			line-height: 44rpx;
			margin-top: 22rpx;
		}

		.body {
			line-height: 48rpx;
			margin-top: 10rpx;
		}

		.images {
			display: flex;
			flex-wrap: wrap;

			.image-item {
				width: 224rpx;
				height: 224rpx;
				border-radius: 3px;
				margin-top: 14rpx;
				margin-right: 14rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

		.time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;

			text {
				color: $uv-tips-color;
				font-size: 28rpx;
			}
		}

		.plate-entry {
			background: $uv-bg-color;
			padding: 0 $side-width;
			border-radius: 5px;
			height: 118rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 36rpx;
			margin-bottom: 22rpx;

			.plate-entry-main {
				display: flex;
				align-items: center;

				image {
					width: 72rpx;
					height: 72rpx;
					background: #fff;
					border-radius: 50%;
				}

				text {
					font-size: 34rpx;
					margin-left: 12rpx;
					max-width: 354rpx;
				}
			}

			.icon-right {
				color: $uv-tips-color;
				font-size: 28rpx;
			}
		}
	}

	.list {
		padding: 0 $side-width;

		.title {
			line-height: 94rpx;
			font-weight: 600;
			font-size: 32rpx;
		}

		.list-item {
			background: #fff;
			padding: $side-width;
			border-radius: 5px;
			margin-bottom: $side-width;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
</style>